<script setup>
import { Search, Edit, Delete } from "@element-plus/icons-vue";

import {
  HomeworkAllService,
  HomeworkAddService,
  HomeworkUpdateService,
  HomeworkDeleteService,
  HomeworkFindService,
} from "@/api/homework.js";

import { courseListService } from "@/api/course.js";
import { questionListService } from "@/api/question.js";

import { ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";

//作业课程数据模型
const courses = ref([]);

//用户搜索时选中的课程id
const courseId = ref("");
//用户搜索时选中的题目id
const questionId = ref("");

//用户搜索时的关键字
const input = ref("");
// 定义状态变量来存储当前选中的按钮类型
const inputType = ref("");
//作业列表数据模型
const homeworks = ref([]);

//分页条数据模型
const pageNum = ref(1); //当前页
const total = ref(20); //总条数
const pageSize = ref(10); //每页条数

// 定义输入框的数据模型
const singleChoiceInput = ref("");
const multipleChoiceInput = ref("");
const fillInBlankInput = ref("");
const shortAnswerInput = ref("");
const judgmentInput = ref("");

//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
  pageSize.value = size;
  getHomeworkList();
};
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
  pageNum.value = num;
  if (centerDialogVisible.value) {
    findQuestions(); // 如果题库弹窗可见，则调用 findQuestions 方法
  } else {
    getHomeworkList(); // 否则调用 getHomeworkList 方法
  }
};

//回显课程
const getCourseList = async () => {
  let result = await courseListService();
  courses.value = result.data;
};

const getHomeworkList = async () => {
  let params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    courseId: courseId.value || null, // 确保为空时传递 null
    title: input.value ? input.value.trim() : null, // 去除前后空格
  };
  console.log("Fetching homework list with params:", params); // 调试信息

  try {
    let result = await HomeworkAllService(params);
    console.log("Result from HomeworkAllService:", result); // 调试信息
    if (result.data && result.data.items) {
      homeworks.value = result.data.items;
      total.value = result.data.total;

      for (let i = 0; i < homeworks.value.length; i++) {
        let item = homeworks.value[i];
        for (let j = 0; j < courses.value.length; j++) {
          if (item.courseId === courses.value[j].courseId) {
            item.courseName = courses.value[j].courseName;
            break;
          }
        }

        // 确保 dueDate 是一个有效的日期对象
        if (item.dueDate) {
          item.dueDate = new Date(item.dueDate).toLocaleString(); // 格式化为本地时间字符串
        } else {
          item.dueDate = null;
        }

        // 确保 courseId 和 homeworkId 是有效的整数
        if (!item.courseId || isNaN(parseInt(item.courseId))) {
          console.error("Invalid courseId in homework item:", item);
          ElMessage.error("课程 ID 无效");
        }
        if (!item.homeworkId || isNaN(parseInt(item.homeworkId))) {
          console.error("Invalid homeworkId in homework item:", item);
          ElMessage.error("作业 ID 无效");
        }
      }
    } else {
      console.error("返回的数据结构不正确", result);
      ElMessage.error("返回的数据结构不正确");
    }
  } catch (error) {
    console.error("查询作业列表失败", error);
    ElMessage.error("查询作业列表失败");
  }
};
getCourseList();
getHomeworkList();

//确保重置按钮可以清空搜索条件
const resetSearch = () => {
  input.value = '';
  courseId.value = '';
  getHomeworkList(); // 重置后重新获取作业列表
};

//控制添加还是修改
const isAdd = ref(true);
//控制抽屉是否显示
const visibleDrawer = ref(false);

const initialDataModel = {
  homework: {
    homeworkId: "",
    title: "",
    description: "",
    dueDate: null,
    type: "",
    courseId: "",
    totalScore: "",
    status: "",
    creator: "",
  },
  questions: [],
  totalScorePerQuestion: 0,
};
const dataModel = ref({ ...initialDataModel });

// 发送创建表单数据
const HomeworkAdd = async () => {
  console.log(dataModel.value);

  // 将日期字符串转换为时间戳或 ISO 格式字符串
  if (dataModel.value.homework.dueDate) {
    const dueDate = new Date(dataModel.value.homework.dueDate);
    if (!isNaN(dueDate.getTime())) {
      // 检查是否为有效日期
      dataModel.value.homework.dueDate = dueDate.toISOString(); // 使用 ISO 格式字符串
    } else {
      ElMessage.error("请选择有效的截止时间");
      return;
    }
  } else {
    dataModel.value.homework.dueDate = null;
  }

  // 确保 courseId 是有效的整数
  if (!dataModel.value.homework.courseId || isNaN(parseInt(dataModel.value.homework.courseId))) {
    ElMessage.error("请选择有效的课程");
    return;
  }

  try {
    let result = await HomeworkAddService(dataModel.value);
    ElMessage.success(result.message ? result.message : "添加成功");
    visibleDrawer.value = false;
    dataModel.value = { ...initialDataModel };
    getHomeworkList();
  } catch (error) {
    ElMessage.error(error.response?.data?.message || "添加失败");
  }
};
// 发送修改表单数据
const HomeworkUpdate = async () => {
  console.log("提交前的 dataModel:", dataModel.value); // 调试信息

  let dueDate = dataModel.value.homework.dueDate;

  if (dueDate) {
    dueDate = new Date(dueDate);
    if (isNaN(dueDate.getTime())) {
      ElMessage.error("请选择有效的截止时间");
      return;
    }
    dataModel.value.homework.dueDate = dueDate.toISOString();
  } else {
    dataModel.value.homework.dueDate = null;
  }

  // 确保 homeworkId 和 courseId 是有效的整数
  if (!dataModel.value.homework.homeworkId || isNaN(parseInt(dataModel.value.homework.homeworkId))) {
    ElMessage.error("作业 ID 无效");
    return;
  }

  if (!dataModel.value.homework.courseId || isNaN(parseInt(dataModel.value.homework.courseId))) {
    ElMessage.error("请选择有效的课程");
    return;
  }

  try {
    let result = await HomeworkUpdateService(dataModel.value);
    console.log("Update result:", result); // 调试信息
    if (result.code === 0) { // 根据实际返回的 code 判断操作是否成功
      ElMessage.success(result.msg ? result.msg : "修改成功");
      visibleUpdateDrawer.value = false;
      dataModel.value = { ...initialDataModel };
      getHomeworkList();
    } else {
      ElMessage.error(result.msg ? result.msg : "修改失败");
    }
  } catch (error) {
    console.error("修改作业失败", error); // 调试信息
    ElMessage.error(error.response?.data?.message || "修改失败");
  }
};
//展示添加表单
const showAddDialog = () => {
  visibleDrawer.value = true;
  dataModel.value = { ...initialDataModel };
};

// 控制修改抽屉是否显示
const visibleUpdateDrawer = ref(false);

// 展示修改表单
const showUpdateDialog = (row) => {
  isAdd.value = false; // 设置为修改状态
  visibleUpdateDrawer.value = true; // 显示修改抽屉
  dataModel.value = {
    homework: {
      homeworkId: row.homeworkId,
      title: row.title,
      description: row.description,
      dueDate: row.dueDate ? new Date(row.dueDate) : null, // 确保是有效的日期对象
      type: row.type,
      courseId: row.courseId, // 确保 courseId 不为空
      totalScore: row.totalScore,
      status: row.status,
      creator: row.creator,
    },
    questions: [], // 初始化题目列表为空
    totalScorePerQuestion: 0,
  };

  // 获取作业中的题目
  fetchQuestions(row.homeworkId);
};
//发送删除作业请求
const HomeworkDelete = (row) => {
  ElMessageBox.confirm("确定要删除吗？", "提示", {
    type: "warning",
  })
    .then(async () => {
      try {
        let result = await HomeworkDeleteService(row.homeworkId);
        ElMessage.success(result.message ? result.message : "删除成功");
        getHomeworkList();
      } catch (error) {
        ElMessage.error(error.response?.data?.message || "删除失败");
      }
    })
    .catch(() => {});
};


const QUESTION_TYPE_MAP = {
  1: "单选",
  2: "多选",
  3: "填空",
  4: "简答",
  5: "判断",
};

const QUESTION_TYPE_ID_MAP = {
  单选: 1,
  多选: 2,
  填空: 3,
  简答: 4,
  判断: 5,
};
const addQuestion = (type) => {
  const newQuestion = {
    answer: "",
    courseId: dataModel.value.homework.courseId,
    courseName: "",
    createTime: "",
    name: "",
    optionA: "",
    optionB: "",
    optionC: "",
    optionD: "",
    questionId: "",
    typeId: QUESTION_TYPE_ID_MAP[type], // 使用常量对象设置 type_id
    typeName: type,
    typeScore: "",
    updateTime: "",
  };

  // 根据题目类型初始化选项
  if (type === "单选" || type === "多选") {
    newQuestion.optionA = "";
    newQuestion.optionB = "";
    newQuestion.optionC = "";
    newQuestion.optionD = "";
  }
  if (type === "判断") {
    newQuestion.optionA = "";
    newQuestion.optionB = "";
  }

  // 确保 courseId 不为空
  if (!newQuestion.courseId) {
    ElMessage.error("请选择课程");
    return;
  }

  dataModel.value.questions.push(newQuestion);
};
// 清空题目
const clearQuestions = () => {
  dataModel.value.questions = [];
};

function cancel() {
  questions.value = [];
  visibleDrawer.value = false;
  visibleUpdateDrawer.value = false; // 确保修改抽屉也关闭
  dataModel.value = { ...initialDataModel }; // 重置数据模型
  clearQuestions(); // 清空题目列表
}

// 控制题目抽屉是否显示
const visibleQuestionDrawer = ref(false);
// 题目列表数据模型
const questions = ref([]);

// 查询这一个作业中的所有题目
const fetchQuestions = async (homeworkId) => {
  try {
    console.log("Fetching questions for homeworkId:", homeworkId); // 调试信息
    let params = {
      homeworkId: homeworkId,
      pageNum: 1, // 默认页码
      pageSize: 100, // 默认每页条数
    };
    console.log("Params:", params); // 调试信息
    let result = await HomeworkFindService(params);
    console.log("Result:", result); // 调试信息
    if (result.data && result.data.list) {
      questions.value = result.data.list.map((question) => ({
        ...question,
        typeName: QUESTION_TYPE_MAP[question.typeId] || "未知类型",
      }));
      console.log("Mapped questions:", questions.value); // 调试信息
      dataModel.value.questions = questions.value; // 将题目列表赋值给 dataModel
      visibleQuestionDrawer.value = true;
    } else {
      console.error("返回的数据结构不正确", result);
      ElMessage.error("返回的数据结构不正确");
    }
  } catch (error) {
    console.error("查询作业题目失败", error);
    ElMessage.error("查询作业题目失败");
  }
};

// 展示作业中的题目抽屉
const showQuestionDialog = (row) => {
  fetchQuestions(row.homeworkId);
};


//控制弹窗出现
const centerDialogVisible = ref(false);

const selectedQuestions = ref([]);

const totalQuestions = ref(0);
const findQuestions = async () => {
  try {
    console.log("Fetching all questions"); // 调试信息
    let params = {
      pageNum: pageNum.value, // 使用当前页码
      pageSize: 10, // 固定每页条数为 100
    };
    console.log("Params:", params); // 调试信息
    let result = await questionListService(params);
    console.log("Result:", result); // 调试信息
    if (result.data && result.data.items) {
      const newQuestions = result.data.items.map((question) => ({
        ...question,
        typeName: QUESTION_TYPE_MAP[question.typeId] || "未知类型",
        courseName: courses.value.find(course => course.courseId === question.courseId)?.courseName || ""
      }));
      console.log("Mapped new questions:", newQuestions); // 调试信息

      // 合并已选择的题目和新获取的题目
      questions.value = Array.from(new Set([...selectedQuestions.value, ...newQuestions].map(q => JSON.stringify(q)))).map(q => JSON.parse(q));

      totalQuestions.value = result.data.total; // 更新总题目数
      centerDialogVisible.value = true;
    } else {
      console.error("返回的数据结构不正确", result);
      ElMessage.error("返回的数据结构不正确");
    }
  } catch (error) {
    console.error("查询题目失败", error);
    ElMessage.error("查询题目失败");
  }
};

const showQuestionVisible = () => {
  questions.value = [];
  selectedQuestions.value = [];
  findQuestions();
};

// 在题库弹窗中监听选择变化
const handleSelectionChange = (val) => {
  selectedQuestions.value = val;
};

const addSelectedQuestions = () => {
  selectedQuestions.value.forEach((question) => {
    dataModel.value.questions.push({
      answer: question.answer,
      courseId: question.courseId,
      courseName: question.courseName,
      createTime: question.createTime,
      name: question.name,
      optionA: question.optionA,
      optionB: question.optionB,
      optionC: question.optionC,
      optionD: question.optionD,
      questionId: question.questionId,
      typeId: question.typeId,
      typeName: question.typeName,
      typeScore: question.typeScore,
      updateTime: question.updateTime,
    });
  });
  centerDialogVisible.value = false;
  selectedQuestions.value = [];
};

const closeDialogVisible = () => {
  questions.value = [];
  selectedQuestions.value = [];
  centerDialogVisible.value = false;
};

const removeQuestion = (index) => {
  dataModel.value.questions.splice(index, 1);
};
</script>



<template>
  <el-card class="page-container transparent-card">
    <template #header>
      <div class="header">
        <div class="extra">
          <el-button type="primary" @click="showAddDialog()"
            >添加作业</el-button
          >
        </div>
      </div>
    </template>
    <!-- 搜索表单 -->
    <el-form inline>
      <el-form-item label="课程：">
        <el-select placeholder="请选择" v-model="courseId">
          <el-option
            v-for="c in courses"
            :key="c.courseId"
            :label="c.courseName"
            :value="c.courseId"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="input"
          style="width: 240px"
          placeholder="请输入作业标题"
          clearable
        />
      </el-form-item>
      <el-form-item>
    <el-button type="primary" @click="getHomeworkList">搜索</el-button>
    <el-button @click="resetSearch">重置</el-button>
  </el-form-item>
    </el-form>
    <!-- 文章列表 -->
    <el-table :data="homeworks" style="width: 100%">
      <el-table-column label="作业id" width="100" prop="homeworkId"></el-table-column> 
      <el-table-column
        label="作业标题"
        width="300"
        prop="title"
      ></el-table-column>
      <el-table-column label="作业描述" prop="description"></el-table-column>
      <el-table-column label="课程名称" prop="courseName"> </el-table-column>
      <el-table-column label="截止时间" prop="dueDate"> </el-table-column>
      <el-table-column label="创建者" prop="creator"> </el-table-column>
      <el-table-column label="操作" width="150">
        <template #default="{ row }" class="button-container">
          <el-button
            :icon="Search"
            circle
            @click="showQuestionDialog(row)"
          ></el-button>
          <el-button
            :icon="Edit"
            circle
            plain
            type="primary"
            @click="showUpdateDialog(row)"
          ></el-button>
          <el-button
            :icon="Delete"
            circle
            plain
            type="danger"
            @click="HomeworkDelete(row)"
          ></el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="没有数据" />
      </template>
    </el-table>
    <!-- 分页条 -->

    <!-- 题目抽屉 -->
    <el-drawer
      v-model="visibleQuestionDrawer"
      title="作业题目"
      direction="rtl"
      size="50%"
    >
      <el-table :data="questions" style="width: 100%">
        <el-table-column label="序号" width="100" type="index">
        </el-table-column>
        <el-table-column
          label="题目标题"
          width="350"
          prop="name"
        ></el-table-column>
        <el-table-column label="题目类型" prop="typeName"></el-table-column>
        <el-table-column label="答案" prop="answer"></el-table-column>
      </el-table>
    </el-drawer>

    <!-- 抽屉 -->
<el-drawer
  v-model="visibleDrawer"
  title="添加作业"
  direction="rtl"
  size="50%"
>
  <el-form :model="dataModel" label-width="100px">
    <el-form-item label="作业标题">
      <el-input
        v-model="dataModel.homework.title"
        placeholder="请输入"
      ></el-input>
    </el-form-item>

    <el-form-item label="作业描述">
      <el-input
        v-model="dataModel.homework.description"
        placeholder="请输入"
      ></el-input>
    </el-form-item>

    <el-form-item label="课程">
      <el-select placeholder="请选择" v-model="dataModel.homework.courseId">
        <el-option
          v-for="c in courses"
          :key="c.courseId"
          :label="c.courseName"
          :value="c.courseId"
        >
        </el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="截止时间">
      <el-date-picker
        v-model="dataModel.homework.dueDate"
        type="datetime"
        placeholder="选择截止时间"
        format="YYYY/MM/DD hh:mm:ss"
        value-format="x"
      ></el-date-picker>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="addQuestion('单选')"
        >单选</el-button
      >
      <el-button type="primary" @click="addQuestion('多选')"
        >多选</el-button
      >
      <el-button type="primary" @click="addQuestion('填空')"
        >填空</el-button
      >
      <el-button type="primary" @click="addQuestion('简答')"
        >简答</el-button
      >
      <el-button type="primary" @click="addQuestion('判断')"
        >判断</el-button
      >
      <el-button type="primary" @click="showQuestionVisible"
        >题库</el-button
      >
      <el-button type="warning" @click="clearQuestions">清空题目</el-button>
    </el-form-item>

    <!-- 显示题目列表 -->
    <el-form-item
  v-for="(question, index) in dataModel.questions"
  :key="index"
  class="question-wrapper"
  label="题目"
>
  <div class="question-content">
    <!-- 题目内容 -->
    <el-input
      v-model="question.name"
      placeholder="请输入题目内容"
    ></el-input>
    
    <!-- 选项内容 -->
    <div
      v-if="question.typeName === '单选' || question.typeName === '多选'"
    >
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="A" label-width="20px">
            <el-input v-model="question.optionA" placeholder="选项 A"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="B" label-width="20px">
            <el-input v-model="question.optionB" placeholder="选项 B"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="C" label-width="20px">
            <el-input v-model="question.optionC" placeholder="选项 C"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="D" label-width="20px">
            <el-input v-model="question.optionD" placeholder="选项 D"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </div>
    <div
      v-if="question.typeName === '简答' || question.typeName === '填空'"
    ></div>
    <div v-if="question.typeName === '判断'">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="正确" label-width="40px">
            <el-input v-model="question.optionA" placeholder="正确"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="错误" label-width="40px">
            <el-input v-model="question.optionB" placeholder="错误"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </div>
    <el-input
      v-model="question.answer"
      placeholder="请输入答案"
    ></el-input>
  </div>

  <!-- 删除按钮 -->
  <el-button type="danger" :icon="Delete" circle @click="removeQuestion(index)" class="delete-button"></el-button>
</el-form-item>

    <el-form-item>
      <el-button type="primary" @click="HomeworkAdd">
        添加
      </el-button>
      <el-button type="info" @click="cancel">取消</el-button>
    </el-form-item>
  </el-form>
</el-drawer>

<!-- 修改作业抽屉 -->
<el-drawer
  v-model="visibleUpdateDrawer"
  title="修改作业"
  direction="rtl"
  size="50%"
>
  <el-form :model="dataModel" label-width="100px">
    <el-form-item label="作业标题">
      <el-input
        v-model="dataModel.homework.title"
        placeholder="请输入"
      ></el-input>
    </el-form-item>

    <el-form-item label="作业描述">
      <el-input
        v-model="dataModel.homework.description"
        placeholder="请输入"
      ></el-input>
    </el-form-item>

    <el-form-item label="课程">
      <el-select placeholder="请选择" v-model="dataModel.homework.courseId">
        <el-option
          v-for="c in courses"
          :key="c.courseId"
          :label="c.courseName"
          :value="c.courseId"
        >
        </el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="截止时间">
      <el-date-picker
        v-model="dataModel.homework.dueDate"
        type="datetime"
        placeholder="选择截止时间"
        format="YYYY/MM/DD hh:mm:ss"
        value-format="x"
      ></el-date-picker>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="addQuestion('单选')"
        >单选</el-button
      >
      <el-button type="primary" @click="addQuestion('多选')"
        >多选</el-button
      >
      <el-button type="primary" @click="addQuestion('填空')"
        >填空</el-button
      >
      <el-button type="primary" @click="addQuestion('简答')"
        >简答</el-button
      >
      <el-button type="primary" @click="addQuestion('判断')"
        >判断</el-button
      >
      <el-button type="primary" @click="showQuestionVisible"
        >题库</el-button
      >
      <el-button type="warning" @click="clearQuestions">清空题目</el-button>
    </el-form-item>

    <!-- 显示题目列表 -->
    <el-form-item
  v-for="(question, index) in dataModel.questions"
  :key="index"
  class="question-wrapper"
  label="题目"
>
  <div class="question-content">
    <!-- 题目内容 -->
    <el-input
      v-model="question.name"
      placeholder="请输入题目内容"
    ></el-input>
    
    <!-- 选项内容 -->
    <div
      v-if="question.typeName === '单选' || question.typeName === '多选'"
    >
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="A" label-width="20px">
            <el-input v-model="question.optionA" placeholder="选项 A"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="B" label-width="20px">
            <el-input v-model="question.optionB" placeholder="选项 B"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="C" label-width="20px">
            <el-input v-model="question.optionC" placeholder="选项 C"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="D" label-width="20px">
            <el-input v-model="question.optionD" placeholder="选项 D"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </div>
    <div
      v-if="question.typeName === '简答' || question.typeName === '填空'"
    ></div>
    <div v-if="question.typeName === '判断'">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="正确" label-width="40px">
            <el-input v-model="question.optionA" placeholder="正确"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="错误" label-width="40px">
            <el-input v-model="question.optionB" placeholder="错误"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </div>
    <el-input
      v-model="question.answer"
      placeholder="请输入答案"
    ></el-input>
  </div>

  <!-- 删除按钮 -->
  <el-button type="danger" :icon="Delete" circle @click="removeQuestion(index)" class="delete-button"></el-button>
</el-form-item>

    <el-form-item>
      <el-button type="primary" @click="HomeworkUpdate">
        修改
      </el-button>
      <el-button type="info" @click="cancel">取消</el-button>
    </el-form-item>
  </el-form>
</el-drawer>

    <!-- 题库弹窗设计 -->
    <el-dialog
      title="题库"
      v-model="centerDialogVisible"
      width="60%"
      align-center
    >
      <el-table :data="questions" style="width: 100%" @selection-change="handleSelectionChange" ref="table" :row-key="row => row.questionId">
        <el-table-column label="序号" width="100" type="index"></el-table-column>
        <el-table-column
          label="题目标题"
          width="300"
          prop="name"
        ></el-table-column>
        <el-table-column label="题目类型" prop="typeName"></el-table-column>
        <el-table-column label="课程名称" prop="courseName"> </el-table-column>
        <el-table-column label="答案" prop="answer"> </el-table-column>
        <el-table-column  width="100" type="selection" :reserve-selection="true"> </el-table-column>
        <template #empty>
          <el-empty description="没有数据" />
        </template>
      </el-table>

   <!-- 分页条 -->
   <el-pagination
    v-model:current-page="pageNum"
    v-model:page-size="pageSize"
    :page-sizes="[10]"
    layout="jumper, total, prev, pager, next"
    background
    :total="totalQuestions"
    @size-change="onSizeChange"
    @current-change="onCurrentChange"
    style="margin-top: 20px; justify-content: flex-end"
  />

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeDialogVisible">关闭</el-button>
        <el-button type="primary" @click="addSelectedQuestions">
          添加
        </el-button>
      </div>
    </template>



    </el-dialog>

    <el-pagination
      v-model:current-page="pageNum"
      v-model:page-size="pageSize"
      :page-sizes="[3, 5, 10, 15]"
      layout="jumper, total, sizes, prev, pager, next"
      background
      :total="total"
      @size-change="onSizeChange"
      @current-change="onCurrentChange"
      style="margin-top: 20px; justify-content: flex-end"
    />
  </el-card>
</template>

<style lang="scss" scoped>
.page-container {
  min-height: 100%;
  box-sizing: border-box;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

.transparent-card {
  background-color: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */
  backdrop-filter: blur(5px); /* 模糊效果 */
  border-radius: 4px; /* 圆角 */
  padding: 20px; /* 内边距 */
}

.el-select {
  width: 200px;
}

.button-container {
  display: flex;
  gap: 8px;
}

/* 抽屉样式 */
.avatar-uploader {
  :deep() {
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }

    .el-upload {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
    }

    .el-upload:hover {
      border-color: var(--el-color-primary);
    }

    .el-icon.avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      text-align: center;
    }
  }
}

.editor {
  width: 100%;
  :deep(.ql-editor) {
    min-height: 200px;
  }
}

.question-wrapper {
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 10px;
  margin-bottom: 10px;
  position: relative; // 添加相对定位
}

/* 移除最后一个题目块的底部边框 */
.question-wrapper:last-child {
  border-bottom: none;
}

.question-content {
  position: relative; // 添加相对定位
}

.delete-button {
  position: absolute; // 绝对定位
  bottom: 10px; // 距离底部10px
  right: 10px; // 距离右侧10px
}

.demo-datetime-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}
.demo-datetime-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}
.demo-datetime-picker .block:last-child {
  border-right: none;
}
.demo-datetime-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>